<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <!-- 左侧按钮导航栏 -->
    <BtnList :btnArr="btnArr" :currentIndex="currentIndex" @deliverIndex="changelist"></BtnList>
    <!-- 右侧商品列表 -->
    <Commity :goodList="goodList" :currentIndex="currentIndex"></Commity>
  </div>
</template>

<script>
// 导入图片
import pic1 from './assets/1.webp'
import pic2 from './assets/2.webp'
import pic3 from './assets/3.webp'
// 导入外部组件
import BtnList from './components/LeftBtnList.vue'
import Commity from './components/Commodity.vue'
export default {
  data(){//定义响应式数据
    return{
      currentIndex:0, //用来保存当前点击的分类下标
      btnArr:['热销','优惠','三文鱼','刺身','年货礼品区','野生大对虾','冻货区','贝壳螺类','鲜虾活鱼'],
      goodList:[
                  {// 一个对象是一个分类
                    list:[
                          {pic:pic3,name:'挪威三文鱼刺身~薄片',intro:'取于三文鱼中断，口感鲜嫩，口感细腻',yx:40,hp:100,price:'45'},
                          {pic:pic2,name:'国产生蚝~刺身',intro:'每份一只广东生蚝，个大肉肥',yx:95,hp:100,price:'8'},
                          {pic:pic3,name:'挪威纯鲜三文鱼刺身~厚片',intro:'百分之百当天空运直达，每份品相极好',yx:34,hp:100,price:'54'},
                          {pic:pic1,name:'北极甜虾',intro:'、健康是福，金屿为鲜。',yx:27,hp:100,price:'22.4'},
                      ]  
                  },
                  {
                    list:[
                          {pic:pic3,name:'章鱼~薄片',intro:'98年的老章鱼，他又8只爪子',yx:40,hp:100,price:'45'},
                          {pic:pic1,name:'烤面筋~刺身',intro:'2、金屿海鲜，魅力无边。',yx:95,hp:100,price:'8'},
                          {pic:pic3,name:'海鲜新概~厚片',intro:'5、爱在海鲜，金屿最美。5、金品海鲜，屿您有约。',yx:34,hp:100,price:'54'},
                          {pic:pic2,name:'北极甜虾',intro:'没分30只',yx:27,hp:100,price:'22.4'},
                      ]  
                  },
                  {
                    list:[
                          {pic:pic3,name:'挪威三文鱼刺身~薄片',intro:'取于三文鱼中断，口感鲜嫩，口感细腻',yx:40,hp:100,price:'45'},
                          {pic:pic2,name:'国产生蚝~刺身',intro:'每份一只广东生蚝，个大肉肥',yx:95,hp:100,price:'8'},
                          {pic:pic3,name:'营养新鲜~厚片',intro:'百分之百当天空运直达，每份品相极好',yx:34,hp:100,price:'54'},
                          {pic:pic1,name:'北极甜虾',intro:'10、金典海鲜，屿您共享。',yx:27,hp:100,price:'22.4'},
                      ]  
                  },
                  {
                    list:[
                          {pic:pic3,name:'挪威三文鱼刺身~薄片',intro:'、金屿海鲜，那才是真的鲜。',yx:40,hp:100,price:'45'},
                          {pic:pic1,name:'国产生蚝~刺身',intro:'16晶直海味只在全屿',yx:95,hp:100,price:'8'},
                          {pic:pic3,name:'挪威纯鲜三文鱼刺身~厚片',intro:'2、情系金屿，海鲜天下。',yx:34,hp:100,price:'54'},
                          {pic:pic1,name:'味享天然',intro:'没分30只',yx:27,hp:100,price:'22.4'},
                      ] 
                  },
              ],
          }
        } ,
  methods:{ //定义方法
    changelist(index){
      this.currentIndex=index;
      console.log(index);
    }
  },
  // 导入外部组件
  components:{
    BtnList,
    Commity
  }
}
</script>

<style lang="scss" >
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
  }
  #app{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    display: flex;
  }
</style>
